<template>
  <view class="index-page">
    <!-- 自定义导航栏 -->
    <custom-navbar
      :title="'人体生命科学馆'"
      :background-color="'#FFFFFF'"
    ></custom-navbar>

    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 轮播图区域 -->
      <view class="carousel-section">
        <swiper
          class="carousel"
          circular
          autoplay
          interval="5000"
          duration="500"
          indicator-dots
          indicator-color="rgba(255, 255, 255, 0.4)"
          indicator-active-color="#FFFFFF"
        >
          <swiper-item v-for="(item, index) in carouselData" :key="index">
            <image
              class="carousel-image"
              :src="`/static${item}`"
            ></image>
          </swiper-item>
        </swiper>
      </view>

      <!-- 快速入口 -->
      <view class="quick-access">
        <view class="quick-access-grid">
          <view
            v-for="(item, index) in quickEntries"
            :key="item.id"
            class="quick-access-item"
            @click="navigateTo(item.url)"
          >
            <uni-icons :type="item.icon" size="28" color="#5a8dee"></uni-icons>
            <text class="quick-text">{{ item.title }}</text>
          </view>
        </view>
      </view>

      <!-- 资讯卡片 -->
      <view class="news-section">
        <view class="section-title">
          <text>最新资讯</text>
          <view class="view-more" @click="navigateTo('/pages/news/index')">
            <text class="more-text">更多</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
        <scroll-view class="news-scroll" scroll-x>
          <view
            class="news-card"
            v-for="(item, index) in newsData"
            :key="index"
            @click="navigateTo(item.url)"
          >
            <view class="news-card-content">
              <text class="news-title">{{ item.title }}</text>
              <text class="news-desc">{{ item.desc }}</text>
            </view>
            <uni-icons type="right" size="16" color="#5a8dee"></uni-icons>
          </view>
        </scroll-view>
      </view>

      <!-- 展览精选 -->
      <view class="exhibition-section">
        <view class="section-title">
          <text>展品精选</text>
          <view
            class="view-more"
            @click="navigateTo('/pages/exhibition/index')"
          >
            <text class="more-text">更多</text>
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
        <view class="exhibition-grid">
          <view
            class="exhibition-item"
            v-for="(item, index) in exhibitionData"
            :key="index"
            @click="navigateTo(`/pages/exhibition/detail?data=${encodeURIComponent(JSON.stringify(item))}`)"
          >
            <image
              class="exhibition-image"
			  :src="item.exhibitImage"
              :height="150"
            ></image>
            <view class="exhibition-info">
              <text class="exhibition-title">{{ item.exhibitName }}</text>
              <text class="exhibition-desc">{{ item.exhibitDesc }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部间距，防止内容被底部标签栏遮挡 -->
    <view class="bottom-gap"></view>

    <!-- 底部标签栏 -->
    <tab-bar :current="0"></tab-bar>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import CustomNavbar from "@/components/custom-navbar/index.vue";
import TabBar from "@/components/tab-bar/index.vue";
import PlaceholderImage from "@/components/placeholder-image/index.vue";
import { request } from "@/utils/request";

// 轮播图接口
const reqSwiper = () => {
	return request({
	  url: "/home/swiper",
	  method: "get",
	})
}

// 展览区展品数据接口
const reqExhibits = (params) => {
	return request({
		url: "/gallery/exhibits",
		method: "get",
		params: params
	})
}

// 页面跳转
const navigateTo = (url) => {
  if (!url) return;
  uni.navigateTo({
    url,
	fail() {
	  uni.switchTab({
	  	url,
	  })
	}
  });
};

// 轮播图数据
const carouselData = ref([]);

// 快速入口数据
const quickEntries = ref([
  {
    id: 0,
    icon: "star",
    title: "最新展览",
    url: "/pages/exhibition/index?type=new",
  },
  {
    id: 1,
    icon: "info",
    title: "人体奥秘",
    url: "/pages/exhibition/index?type=human",
  },
  {
    id: 2,
    icon: "calendar",
    title: "病理标本",
    url: "/pages/exhibition/index?type=pathology",
  },
  {
    id: 3,
    icon: "map",
    title: "3D解剖",
    url: "/pages/exhibition/index?type=3d",
  },
]);

// 资讯数据
const newsData = ref([
  {
    id: 1,
    title: "医学史特展：从古至今的医学发展",
    desc: "探索医学发展的历史长河，见证人类智慧的结晶",
    url: "/pages/news/detail?id=1",
  },
  {
    id: 2,
    title: "现代医学影像技术展",
    desc: "了解最新的医学影像技术，感受科技的力量",
    url: "/pages/news/detail?id=2",
  },
  {
    id: 3,
    title: "医学标本保护及修复技术展示",
    desc: "展示先进的标本保护工艺与修复技术",
    url: "/pages/news/detail?id=3",
  },
]);

// 展览精选数据
const exhibitionData = ref([]);
// 获取展览区分类数据请求参数
const queryparams = ref({
	galleryId: 1,
	page: 1
})

onMounted( async () => {
	const data = await reqSwiper()
	carouselData.value = data.data
	const res = await reqExhibits(queryparams.value)
	exhibitionData.value = res.data.slice(0, Math.floor(Math.random() * 8 + 1))
})
</script>

<style lang="scss" scoped>
.index-page {
  background-color: $uni-bg-color-grey;
  min-height: 100vh;
}

.main-content {
  padding-bottom: 120rpx;
}

// 轮播图样式
.carousel-section {
  padding: $spacer-4;

  .carousel {
    height: 360rpx;
    border-radius: $uni-border-radius-lg;
    overflow: hidden;
    box-shadow: $box-shadow-card;
  }

  .carousel-image {
    width: 100%;
    height: 100%;
  }
}

// 快速入口样式
.quick-access {
  padding: $spacer-4;
  background-color: $uni-bg-color;
  margin: 0 $spacer-4 $spacer-4;
  border-radius: $uni-border-radius-lg;
  box-shadow: $box-shadow-card;

  .quick-access-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: $spacer-4;
  }

  .quick-access-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $spacer-2 0;

    &:active {
      opacity: 0.8;
    }
  }

  .quick-text {
    font-size: $uni-font-size-sm;
    color: $uni-text-color;
    margin-top: $spacer-2;
  }
}

// 通用标题样式
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $spacer-2 $spacer-4;
  margin-bottom: $spacer-2;
  font-size: $uni-font-size-lg;
  font-weight: 500;

  .view-more {
    display: flex;
    align-items: center;

    .more-text {
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
      margin-right: $spacer-1;
    }
  }
}

// 资讯卡片样式
.news-section {
  margin-bottom: $spacer-4;

  .news-scroll {
    box-sizing: border-box;
    white-space: nowrap;
    padding: 0 $spacer-4;
  }

  .news-card {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin-right: $spacer-3;
    padding: $spacer-4;
    background-color: $uni-bg-color;
    border-radius: $uni-border-radius-base;
    box-shadow: $box-shadow-card;

    &:last-child {
      margin-right: 0;
    }
  }

  .news-card-content {
    flex: 1;
    margin-right: $spacer-2;
  }

  .news-title {
    font-size: $uni-font-size-base;
    font-weight: 500;
    display: block;
    margin-bottom: $spacer-2;
  }

  .news-desc {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
    display: block;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}

// 展览精选样式
.exhibition-section {
  margin-bottom: $spacer-4;

  .exhibition-grid {
    padding: 0 $spacer-4;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacer-3;
  }

  .exhibition-item {
    background-color: $uni-bg-color;
    border-radius: $uni-border-radius-base;
    overflow: hidden;
    box-shadow: $box-shadow-card;
  }
  
  .exhibition-image {
    width: 100%;
    height: 400rpx;
    object-fit: cover;
  }

  .exhibition-info {
    padding: $spacer-2;
  }

  .exhibition-title {
    font-size: $uni-font-size-base;
    font-weight: 500;
    display: block;
    margin-bottom: $spacer-1;
  }

  .exhibition-desc {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

// 底部间距，防止内容被底部标签栏遮挡
.bottom-gap {
  height: 100rpx;
}
</style>
